<template>
  <div class="flow-attr">
    <el-form label-position="left" class="flow-config-attr" label-width="90px">
      <el-form-item label="节点编号">
        <el-input v-model="_value.code" class="input-attr" disabled />
      </el-form-item>
      <el-form-item label="节点类型">
        <el-radio-group v-model="_value.type" disabled>
          <el-radio
            v-for="(item, index) in DIC_PROP.NODE_TYPE_DESC"
            :key="index"
            :value="item.value"
            :label="item.label"
          />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="节点名称">
        <el-input
          v-model="_value.name"
          class="input-attr"
          placeholder="请输入节点名称"
        />
      </el-form-item>
      <template v-if="_value.type === 'Job' && _value.props.tasks">
        <el-form-item label="执行模式">
          <el-radio-group v-model="_value.props.executeMode" class="input-attr">
            <el-radio
              v-for="(item, index) in DIC_PROP.EXECUTE_MODE"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="并行模式">
          <el-radio-group
            v-model="_value.props.parallelMode"
            class="input-attr"
          >
            <el-radio
              v-for="(item, index) in DIC_PROP.PARALLEL_MODE"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-radio-group>
        </el-form-item>
      </template>
      <template v-if="validateNode">
        <el-form-item label="节点抄送人">
          <el-button
            style="margin-right: 10px"
            size="small"
            type="primary"
            @click="handleUserPickerShow('1')"
          >
            选择人员
          </el-button>
          <div class="w-org-items">
            <el-tag
              v-for="(tag, index) in _value.props.copyUserList"
              :key="tag.id"
              closable
              type="primary"
              @close="_value.props.copyUserList.splice(index, 1)"
              style="margin-right: 10px"
            >
              {{ tag.text }}
            </el-tag>
          </div>
          <el-tooltip placement="top" content="将审批结果通知给抄送人">
            <el-icon style="margin-left: 10px"><QuestionFilled /> </el-icon>
          </el-tooltip>
        </el-form-item>
      </template>

      <template v-if="_value.type === 'Job'">
        <el-form-item label="同一审批人">
          <el-switch
            v-model="_value.props.passSame"
            active-value="1"
            inactive-value="0"
            inactive-text="不自动审批"
            active-text="自动审批"
          />
        </el-form-item>
        <el-form-item label="被驳回后">
          <el-switch
            v-model="_value.props.rejectType"
            active-value="1"
            inactive-value="0"
            inactive-text="审批时依次审批"
            active-text="审批时直接跳转到驳回节点"
          />
          <el-tooltip
            placement="top"
            content="表示被驳回后的节点再次审批时，需要再次经历途中节点【依次返回】到原驳回的节点，还是【直接返回】到原驳回的节点"
          >
            <el-icon style="margin-left: 10px"><QuestionFilled /> </el-icon>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="表单模式">
          <el-radio-group v-model="_value.props.formMode">
            <el-radio value="normal" label="编辑模式" />
            <el-radio value="read" label="只读模式" />
            <el-radio value="disable" label="禁用模式" />
          </el-radio-group>
        </el-form-item>
      </template>

      <template v-if="_value.type === 'Job' || _value.type === 'Start'">
        <el-form-item label="自动审批">
          <el-switch
            v-model="_value.props.autoAudit"
            active-value="1"
            inactive-value="0"
            inactive-text="否"
            active-text="是"
            @change="hideJobFormPerms"
          />
        </el-form-item>
        <el-form-item label="节点时限">
          <el-input-number
            v-model="_value.props.timeout"
            class="input-attr"
            placeholder="小于0则不限制"
          />
        </el-form-item>
        <el-form-item label="节点排序">
          <el-input-number v-model="_value.props.sort" class="input-attr" />
        </el-form-item>
      </template>
      <template v-if="_value.type === 'Job' && _value.props.tasks">
        <el-form-item label="审批按钮">
          <el-checkbox-group
            v-model="_value.props.approveButtons"
            class="input-attr"
          >
            <el-checkbox
              v-for="(item, index) in DIC_PROP.APPROVE_BUTTONS"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-checkbox-group>
        </el-form-item>
      </template>
    </el-form>
    <OrgUserPicker
      ref="userPickerRef"
      multiple
      type="user"
      @ok="handleUserPickerConfirm"
    />
  </div>
</template>
<script setup>
import { DIC_PROP, filterDictLabel } from "@/views/design/process/Dict";
import OrgUserPicker from "@/views/design/OrgUserPicker.vue";
import DefFlowPicker from "@/components/flow/defFlowPicker.vue";

const _value = defineModel();
const userPickerRef = ref(null);
const defFlowPickerRef = ref(null);

const getNodeLabel = nodeType => {
  const opDesc = filterDictLabel(DIC_PROP.NODE_TYPE_DESC, nodeType);
  return opDesc;
};

const handleUserPickerShow = () => {
  userPickerRef.value.show();
};

function handleUserPickerConfirm(users) {
  _value.value.props.copyUserList = users;
}

const validateNode = () => {
  return true;
};

const hideJobFormPerms = () => {};
</script>
<style lang="scss" scoped>
@use "@/assets/style/design/flow-attr.scss";
</style>
